<template>
  <view class="userInfo">

  <view class="userIfo-box">
    <image :src="userinfo.avatarUrl" mode=""></image>
    <view class="user-desc">
      {{userinfo.nickName}}
    </view>
  </view>
    <!-- 面板区 -->
    <view class="palnel-box">
      <!-- 记录区 -->
      <view class="palnel-item-1">
          <view class="slice-item">
            <view class="numCount">8</view>
            <view class="decText">收藏的店铺</view>
          </view>
          <view class="slice-item">
            <view class="numCount">14</view>
            <view class="decText">收藏的商品</view>
          </view>
          <view class="slice-item">
            <view class="numCount">18</view>
            <view class="decText">关注的商品</view>
          </view>
          <view class="slice-item">
            <view class="numCount">84</view>
            <view class="decText">足迹</view>
          </view>
      </view>
      <!-- 订单相关 -->
      <view class="palnel-item-2">
        <view class="my-order">
          我的订单
        </view>
        <view class="order-disc">
          <view class="order-item">
            <image src="/static/myOder1.png" ></image>
            <view class="img-desc">待付款</view>
          </view>
          <view class="order-item">
            <image src="/static/myOder2.png" ></image>
            <view class="img-desc">待收货</view>
          </view>
          <view class="order-item">
            <image src="/static/myOder3.png" ></image>
            <view class="img-desc">退款/退货</view>
          </view>
          <view class="order-item">
            <image src="/static/myOder4.png" ></image>
            <view class="img-desc">全部订单</view>
          </view>
        </view>
      </view>
      <!-- 选择设置区 -->
      <view class="palnel-item-3">
        <view class="szItem">
          <text class="addrText">收获地址</text>
          <uni-icons class="ico-forward" type="forward" size="24"></uni-icons>
        </view>
        <view class="szItem">
          <text class="addr">联系客服</text>
          <uni-icons type="forward" size="24"></uni-icons>
        </view>
        <view class="szItem">
          <text @click="goBackLogin" class="addr">退出登录</text>
          <uni-icons type="forward" size="24"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    name:"my-userinfo",
    data() {
      return {
        
      };
    },
    computed: {
      ...mapState('my_user',['userinfo'])
    },
    methods: {
      ...mapMutations('my_user',['updataToken','updataUserinfo','updataAddress']),
      async goBackLogin() {
        const [err,res] = await uni.showModal({
          title: '提示',
          content: '确认退出吗'
        }).catch(err => err)
        if (res && res.confirm) {
          this.updataAddress({})
          this.updataUserinfo({})
          this.updataToken('')
        }
      }
    }
  }
</script>

<style lang="scss">
  .userInfo {
    box-sizing: border-box;
  .userIfo-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 400rpx;
    background-color: #ffff7f;
    
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 75rpx;
      background-color: #007AFF;
    }
    .user-desc {
      margin-top: 20rpx;
      
    }
    }
  .palnel-box {
  
    width: 100%;
    height: 380px;
    background-color: #c8ccd4;
      .palnel-item-3 {
        width: 90%;
        height: 180px;
        background-color: #ffffff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        margin-top: 20px;
        justify-content: space-around;
        // align-items: center;
        .szItem {
          padding: 2px 8px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .addrText {}
          .ico-forward {}
        }
      }
      // 订单相关
    .palnel-item-2 {
      width: 90%;
      height: 100px;
      border-radius: 10px;
      font-size: 13px;
      margin-top: 5px;
      margin-left: 20px;
      background-color: #ffffff;
      .my-order {
        width: 100%;
        height: 35px;
        line-height: 40px;
        padding-left: 5px;
        border-bottom: 1px solid #000000;
        margin-bottom: 5px;
      }
      .order-disc {
          display: flex;
          justify-content: space-around;
          align-items: center;
        .order-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          image {
          width: 35px;
          height: 35px;
          }
          .img-desc {}
        }
      }
    }
    // 记录区
    .palnel-item-1 {
    position: relative;
    left: 20px;
    top: -10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    width: 90%;
    height: 50px;
      .slice-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .numCount {}
        .decText {}
      }
    }
    }
  }
</style>
